<template>
  <Pad class="articleDetail" v-if="notice">
    <h1>{{notice.newsName}}</h1>
    <h2 class="articleDetail-info">
      <span class="articleDetail-date">{{ notice.releaseTime }}</span>
    </h2>
    <div v-html="notice.news" class="editor-content"></div>
  </Pad>
</template>

<script>
import Pad from "@/components/pad";
import { noticeInfo } from "@/api/notice";
export default {
  data() {
    return {
      notice: undefined
    };
  },
  components: {
    Pad
  },
  created() {
    console.log(this.$route);
    noticeInfo({ id: this.$route.params.id }).then(({ data }) => {
      this.notice = data;
    });
  },
  methods: {}
};
</script>



<style lang='scss'>
.articleDetail {
  background: #fff;
  h1 {
    font-size: 0.48rem /* 36/75 */;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    line-height: 0.6rem /* 45/75 */;
    margin-bottom: 0.533333rem /* 40/75 */;
  }
  &-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.53rem /* 40/75 */;
  }
  &-date {
    font-size: 0.32rem /* 24/75 */;
    font-weight: 400;
    color: rgba(191, 191, 191, 1);
  }
  .hot {
    color: #f1404b;
    font-size: 0.32rem /* 24/75 */;
    display: flex;
    align-items: center;
    line-height: 1;
    img {
      width: 0.4rem /* 30/75 */;
      margin-right: 0.133333rem /* 10/75 */;
    }
  }
  .collect {
    width: 1.546667rem /* 116/75 */;
    height: 0.64rem /* 48/75 */;
    color: #4482ff;
    border: 1px solid #4482ff;
    text-align: center;
    line-height: 0.64rem /* 48/75 */;
    border-radius: 0.053333rem /* 4/75 */;
  }
  .collected {
    color: #fff;
    background-color: #4482ff;
  }
}
</style>
